import { Button, Col, Empty, Row, Space } from "antd";
import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { filter_products } from "../../store/actions/filter.action";
import FilterByCategory from "./FilterByCategory";
import FilterByPrice from "./FilterByPrice";
import Layout from "./Layout";
import ProductionItem from "./ProductionItem";

export default function Shop() {
    const [filters, setFilter] = useState({ category: [], price: [] })
    const dispatch = useDispatch()
    const [skip, setSkip] = useState(0)
    const { data, size } = useSelector(state => state.filterReducer)

    useEffect(() => {
        setSkip(0)
    }, [filters])

    useEffect(() => {
        dispatch(filter_products({ filters, skip }))
        // eslint-disable-next-line
    }, [filters, skip])

    function loadMore() {
        setSkip(skip + 4)
    }
    return (
        <Layout title='舒澄书屋' subTitle='粽意的图书汇'>
            <Row>
                <Col span='4'>
                    <Space size='middle' direction='vertical'>
                        <FilterByCategory handleFilter={item => setFilter({ ...filters, category: item })} />
                        <FilterByPrice handleFilter={item => setFilter({ ...filters, price: item })} />
                    </Space>
                </Col>
                <Col span='20'>
                    <Row gutter={[16, 16]}>
                        {
                            data.map(product => (
                                <Col key={product._id} span='6'>
                                    <ProductionItem product={product} />
                                </Col>
                            ))
                        }
                    </Row>
                    <Space size='large' direction='vertical'>
                        <Row>
                            {size >= 4 ? <Button onClick={loadMore}>加载更多</Button> : <Empty />}
                        </Row>
                    </Space>
                </Col>
            </Row>
        </Layout>
    )
}